<template>
  <div>
    <!-- 顶部导航栏组件 -->
    <div class="navigation" style="background-color: #8d5034">

      <div @click="handleClick" style="float: right;margin-right: 20px">
        <el-avatar :size="50"
                   :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                   style="cursor: pointer"
        >
        </el-avatar>
      </div>

      <!-- 靠左边的部分 -->
      <router-link style=" display: flex; font-size: 22px;margin-left: 40px;color: white" :to="{ path: '/index' }" title="前往首页" :class="{ 'active': currentRoute === '/index' }">首页</router-link>
      <router-link :to="{ path: '/login' }"  title="前往登录" v-if="this.$store.state.IS_LOGIN==='-1'" :class="{ 'active': currentRoute === '/login'  || currentRoute === '/register'}">登录/注册</router-link>


    </div>


    <div style="height: 1px;background-color: #FFFFFF4C"></div>

    <el-drawer
        title="个人资料"
        :visible.sync="drawer"
        style="text-align: left;"
    >
      <div style="margin: 25px">{{this.$store.state.loginUser.username}}
      <el-tag v-if="this.$store.state.loginUser.type===0" >超级管理员</el-tag>
      <el-tag v-else-if="this.$store.state.loginUser.type===1">管理员</el-tag>
      <el-tag v-else-if="this.$store.state.loginUser.type===2">员工</el-tag>
      <el-tag v-else>游客</el-tag>

      </div>

      <div style="margin: 25px">
      <br><br>
      <el-button @click="loginOut">退出登录</el-button>
      </div>
    </el-drawer>




  </div>
</template>

<script>
import '../../css/navigation.css';

export default {
  name: "navigation",
  data() {
    return {
      currentRoute: this.$route.path,
      drawer: false
    }
  },
  methods: {
    loginOut(){
      this.$store.state.loginUser=null
      this.$store.state.IS_LOGIN='-1'
      this.$router.push('/login');
    },
    handleClick() {
      // 执行你想要的操作，比如打开侧边栏
      this.drawer = true;
    },
  },
  watch: {
    '$route': function (to, from)
    {
      this.currentRoute = to.path;
    }
  }
}
</script>

<style scoped>
.active {
  color: #3697e8; /* 设置高亮颜色 */
}
</style>
